<template>
  <div class="userinfo" :style="{ height: getHeight }">
    <el-descriptions class="margin-top" title="个人信息" :column="3" size="large" border>
      <template #extra>
        <el-button v-if="store.identity" type="primary" @click="dialogVisible = true" :loading="updatabtn">提交</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="8">
              <User />
            </el-icon>
            UserName
          </div>
        </template>
        <el-input v-model="user.username"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="8">
              <Message />
            </el-icon>
            UserEmail
          </div>
        </template>
        <el-input v-model="user.userEmail"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <ElementPlus />
            </el-icon>
            Sex
          </div>
        </template>
        <el-input v-model="user.sex"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Lock />
            </el-icon>
            PassWord
          </div>
        </template>
        <el-input v-model="user.userPassword" show-password></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="8">
              <office-building />
            </el-icon>
            Address
          </div>
        </template>
        桂林电子科技大学（花江校区）
      </el-descriptions-item>
    </el-descriptions>

    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <span>是否提交你的修改</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updataUser">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  Message,
  ElementPlus,
  OfficeBuilding,
  Lock,
  User,
} from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue';
import { usestore } from '../../store';
import api from '../../api/api';
import { ElMessage } from 'element-plus';
const store = usestore()

let user = reactive({
  userId: 0,
  username: '',
  userPassword: '',
  sex: '',
  userEmail: ''
})

user = store.user

let updatabtn = ref(false)

const dialogVisible = ref(false)

let getHeight = ref('')


const updataUser = () => {
  dialogVisible.value = !dialogVisible.value
  updatabtn.value = !updatabtn.value
  if (store.identity) {
    api.userUpdata(user).then(
      res => {
        if (res.data.code == 200) {
          ElMessage({
            message: '修改信息成功',
            type: 'success'
          })
          updatabtn.value = !updatabtn.value
        }
      }).catch(err => console.log(err))
  } else {
    api.AdminUpdata({ adminId: user.userId, adminName: user.username, adminPassword: user.userPassword }).then(
      res => {
        if (res.data.code == 200) {
          ElMessage({
            message: '修改信息成功',
            type: 'success'
          })
          updatabtn.value = !updatabtn.value
        }
      }).catch(err => console.log(err))
  }
}


onMounted(() => {

  getHeight.value = window.innerHeight - 136 + 'px'
  window.onresize = () => {
    getHeight.value = window.innerHeight - 136 + 'px'
  }

})
</script>

<style scoped>
.userinfo {
  background-color: #fcfffc;
  border-radius: 5px;
}

.el-descriptions {
  margin-top: 20px;
  padding: 10px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>